<template>
  <div class="smslogin">
    <div class="logo">
      <img src="../../public/images/login.png" alt="" />
    </div>
    <form>
      <div :class="{ active: active == 1 }">
        <input type="text" placeholder="请输入手机号" @blur="active = ''" @focus="active = 1" v-model="form.mobile" />
        <div style="width: 300px" v-if="flag" @click="sendcode">获取验证码</div>

        <div v-else style="width: 360px; color: #999">
          获取验证码({{ timer }})
        </div>
      </div>

      <div :class="{ active: active == 2 }">
        <input type="text" placeholder="请输入短信验证码" @blur="active = ''" @focus="active = 2" v-model="form.sms_code" />
      </div>

      <div style="color: #999; font-size: 20px">
        <p>*未注册的手机号将自动注册</p>
        <p @click="login">使用密码登录</p>
      </div>
      <div class="login">
        <p @click="toLogin">登录</p>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import { getSmsCode, getLogin } from "../http/login"
import { useRouter } from "vue-router";
const router = useRouter()
const active = ref("")
const flag = ref(true)
const timer = ref(60)
const form = reactive({
  mobile: "",
  sms_type: "login",
  sms_code: "",
  type: 2,
  client: ""
})
const login=()=>{
  router.push("/login")
}
const toLogin = async () => {
  let res = await getLogin(form)
  console.log(res);
  if (res.code == 200) {
    router.push("/login")
  } else {
    alert(res.msg)
    // this.$Toast.fail(res.msg)
    router.push("/login")
  }
}
const sendcode = async () => {
  const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  if (!reg.test(form.mobile)) {
    alert("不是手机号")
    // this.$Toast.fail("不是手机号");
  } else {
    flag.value = false
  }
  let res = await getSmsCode(form)
  console.log(res);
  let t = setInterval(() => {
    if (timer.value > 0) {
      timer.value--
    } else {
      timer.value = 60
      flag.value = true
      clearInterval(t)
    }
  }, 2000)
}

</script>

<style lang="scss" scoped>
.smslogin {
  background-color: #fff;
  height: 100vh;
}

.logo {
  width: 100vw;
  height: 200px;
  text-align: center;

  img {
    width: 525px;
    height: 115px;
    margin: 50px;
  }
}

form {
  font-size: 30px;

  >div {
    width: 80vw;
    display: flex;
    justify-content: space-between;
    margin: 50px auto;

  }

  input:focus {
    outline: none;
    border: none;
    width: 100%;
  }

  input {
    border: none;
    width: 100%;
  }
}

.active {
  border: none;
  border-bottom: 1px solid red;
}

.login {
  width: 80vw;
  height: 60px;
  background: url(../assets/theme-img/login-btn.png) no-repeat;
  background-size: 100% 100%;

  p {
    margin: 10px auto;
    color: #fff;
  }
}
</style>
